<template>
	<view class="wrap">
		<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">		
			<view class="section">
				<u-form-item class="u-form-item" label-position="top" label="联系手机" prop="mobile" label-width="150">
					<view class="d-flex align-items-center switch">
						<text class="text-color-assist mr-10">是否展示</text>
						<u-switch v-model="model.is_show_mobile" size="40" active-color="#EED146" @change="isShowMobileChange"></u-switch>
					</view>
					<u-input placeholder="请填写联系手机号码" v-model="model.mobile" type="number"></u-input>
				</u-form-item>
				<u-form-item label-position="top" label="联系微信" prop="wechatNo" label-width="150" :required="true">
					<u-input placeholder="请填写微信联系号码" v-model="model.wechat_no" type="text"></u-input>
				</u-form-item>
			</view>
			<view class="express_tip text-color-assist">*寄拍买家秀需填写收货地址</view>
			<view class="section">
				<u-form-item label-position="top" label="收货人姓名" prop="name" label-width="150">
					<u-input placeholder="收货人姓名" v-model="model.name" type="text"></u-input>
				</u-form-item>
				<u-form-item class="u-form-item" label-position="top" label="收货人号码" prop="mobile" label-width="150">
					<u-input placeholder="请填写联系手机号码" v-model="model.express_mobile" type="number"></u-input>
				</u-form-item>
				<u-form-item label-position="top" label="收货地区" prop="region" label-width="150">
					<u-input type="select" :value="region" placeholder="请选择收货地区" @click="regionChange = true"></u-input>
				</u-form-item>
				<u-form-item label-position="top" label="收货详细地址" prop="address" label-width="150">
					<u-input type="textarea" placeholder="请填写详细收货地址" v-model="model.address" />
				</u-form-item>
			</view>
		</u-form>
		<view class="submit-btn">
			<q-button @tap="submit" shape="circle">保存</q-button>
		</view>
		<city-select v-model="regionChange" :isShowArea="true" @city-change="cityChange"></city-select>
	</view>
</template>

<script>
import {mapState, mapMutations } from 'vuex'
import citySelect from '@/components/city-select/city-select.vue';
export default {
	components: {
		citySelect
	},
	data() {
		return {
			regionChange:false,
			errorType: ['toast'],
			region:'',
			model: {
				name:'',
				mobile:'',
				express_mobile:'',
				wechat_no:'',
				province:'',
				city:'',
				area:'',
				address:'',
				is_show_mobile:true
			},
			rules: {
				wechat_no: [
					{
						required: true,
						message: '请输入微信号码',
						trigger: 'change'
					},
				]
			}
		};
	},
	computed:{
		...mapState(['userInfo', 'contact']),
	},
	onLoad() {
		if(this.contact) {
			this.model = this.contact;
			this.region = this.model.province +' '+this.model.city + ' ' + this.model.area;
		}
	},
	onReady() {		
		this.$refs.uForm.setRules(this.rules);
	},
	methods: {
		...mapMutations(['setContact']),
		isShowMobileChange(value) {
			this.model.is_show_mobile = value;
		},
		async submit() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					this.request();
				} 
			});
		},
		async request(e) {			
			uni.showLoading({mask: true,title: '保存中...'});
			this.setContact(this.model);
			uni.hideLoading();
			uni.navigateBack();
		},
		cityChange(e) {
			this.region   = e.province + ' ' + e.city + ' ' + e.area;
			this.model.province = e.province;
			this.model.city     = e.city;
			this.model.area     = e.area;
		}
	}
};
</script>
<style>
page {
	background-color: #F5F5F5;
}
.wrap {
	padding-bottom: 150rpx;
}
.section {
	background-color: #FFFFFF;
	padding: 0 30rpx;
	margin-top: 20rpx;
}
.express_tip {
	padding: 20rpx 20rpx 0 20rpx;
}
.section .title {
	padding: 30rpx 0;
	font-size: 36rpx;
	font-weight: bold;
}
.submit-btn{
	width: 100%;
	background-color: #FFFFFF;
	position: fixed;
	bottom:0;
	margin-top: 40rpx;
	z-index: 999;
}
.u-form-item {
	position: relative;
}
.u-form-item .switch {
	position: absolute;
	top:15rpx;
	right: 0rpx;
}

</style>
<style scoped lang="scss">
</style>
